import React, { useEffect, useState } from 'react';
import './style.less';
import { SideBar, SearchBar } from 'antd-mobile';
import { LeftOutline } from 'antd-mobile-icons';
import axios from 'axios';
import { history } from 'umi';

// 内容组件（bottomRight）
function BottomRight(props: any) {
  console.log(props.data.children, '000000000000');
  let data = props.data.children;
  const [id, setId] = useState('');
  useEffect(() => {
    setId(data[0]._id);
  }, [data]);
  function go(id) {
    history.push({
      pathname: '/Cgoods',
      query: {
        id: id,
      },
    });
    // history.push('/Cgoods')
  }
  return (
    <div className="br">
      <div className="it">
        <div className="img">
          {/* <img
            src="https://img.alicdn.com/imgextra/i3/O1CN01Sf6dER1zbJ3uVQ0lE_!!6000000006732-0-tps-846-472.jpg"
            width="100%"
            height="100px"
            alt=""
          /> */}
        </div>
        <div className="top">
          {data
            ? data.map((item) => {
                return (
                  <div
                    className={item._id === id ? 'liang' : ''}
                    onClick={() => setId(item._id)}
                  >
                    <a
                      href={'#' + item._id}
                      className={item._id === id ? 'liang' : ''}
                    >
                      {item.name}
                    </a>
                  </div>
                );
              })
            : '暂无数据'}
        </div>
      </div>

      <div className="recommend">
        <div className="zhanwei"></div>
        {/* <div className='zzzz'> */}
        <div className="bottom">
          {data
            ? data.map((item) => {
                return (
                  <div className="bbbig" key={item._id}>
                    <p className="zzzzz" id={item._id}>
                      {item.name}
                    </p>
                    <div className="bbig">
                      {item.children
                        ? item.children.map((i) => {
                            return (
                              <div key={i._id} onClick={() => go(i._id)}>
                                <div className="imgs">
                                  <img
                                    src={i.img}
                                    width="100%"
                                    height="100%"
                                    alt=""
                                  />
                                </div>
                                <div>{i.name}</div>
                              </div>
                            );
                          })
                        : '暂无产品'}
                    </div>
                  </div>
                );
              })
            : '暂无数据'}
        </div>
      </div>
    </div>
  );
}

export default function index() {
  // 类别id
  const [id, setId] = useState('643e80d15f686059df613c4a');
  // 存数据
  const [classes, setClasses] = useState<any[]>([]);
  // 传给子组件
  const [kid, setKid] = useState(false);

  useEffect(() => {
    getData();
  }, []);
  function getData() {
    axios.get('/api/classify/getClassify').then((res) => {
      console.log(res, 'ressssssssssssssssssss');
      setClasses(res.data.data);
      setId(res.data.data[0]._id);
      setKid(res.data.data[0]);
      console.log(res.data.data[0]);
    });
  }
  // 点击侧边栏
  function change(key: string) {
    // console.log(key,'127127');
    setId(key);

    getKid(key);
  }
  // 获取子组件的数据
  function getKid(id: String) {
    classes.map((item) => {
      if (item._id === id) {
        setKid(item);
      }
    });
  }

  return (
    <div className="classify">
      <div className="header">
        <LeftOutline fontSize={20} />
        <SearchBar
          className="search"
          placeholder="请输入内容"
          style={{ '--background': '#ffffff', padding: ' 10px 5px' }}
        />
      </div>
      <div className="body">
        <div className="left">
          <SideBar onChange={(e) => change(e)} activeKey={id}>
            {classes.map((item) => (
              <SideBar.Item key={item._id} title={item.name} />
            ))}
          </SideBar>
        </div>
        <div className="right">
          {kid ? <BottomRight name="1212" data={kid}></BottomRight> : ''}
        </div>
      </div>
    </div>
  );
}
